<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>电影动态信息管理页面</title>
    <link href="../../static/jquery-easyui-1.3.3/themes/default/easyui.css" th:href="@{/static/jquery-easyui-1.3.3/themes/default/easyui.css}" rel="stylesheet" type="text/css"/>
    <link href="../../static/jquery-easyui-1.3.3/themes/icon.css" th:href="@{/static/jquery-easyui-1.3.3/themes/icon.css}" rel="stylesheet" type="text/css"/>
    <script src="../../static/jquery-easyui-1.3.3/jquery.min.js" th:src="@{/static/jquery-easyui-1.3.3/jquery.min.js}" type="text/javascript"></script>
    <script src="../../static/jquery-easyui-1.3.3/jquery.easyui.min.js" th:src="@{/static/jquery-easyui-1.3.3/jquery.easyui.min.js}" type="text/javascript"></script>
    <script src="../../static/jquery-easyui-1.3.3/locale/easyui-lang-zh_CN.js" th:src="@{/static/jquery-easyui-1.3.3/locale/easyui-lang-zh_CN.js}" type="text/javascript"></script>
    <script>
        // 搜索电影动态
        function searchMovieDetail() {
            // 用搜索框的值（参数为info）传给服务器，重新加载表格
            $('#dg').datagrid('load', {
                'info': $('#s_movieDetail').val()
            });
        }

        // 删除电影动态
        function deleteMovieDetail() {
            // 获取所有被选中的行
            var selectedRows = $('#dg').datagrid('getSelections');
            if (selectedRows.length === 0) {
                $.messager.alert('系统提示', '请选择要删除的电影动态！');
                return;
            }

            // 要删除电影的id数组
            var strIds = [];
            for (var i = 0; i < selectedRows.length; i++) {
                strIds.push(selectedRows[i].id);
            }

            // 合并id为字符串
            var ids = strIds.join(',');
            $.messager.confirm('系统提示',
                '您确定要删除这<font color=red>' + selectedRows.length + '</font>条数据嘛吗？',
                function (r) {
                    if (r) {
                        $.post('/admin/movieDetail/delete', { ids: ids }, function (result) {
                                if (result.success) {
                                    $.messager.alert('系统提示', '数据已删除成功！');
                                } else {
                                    $.messager.alert('系统提示', '数据删除失败！');
                                }
                                // 重新加载表格
                                $('#dg').datagrid('reload');
                            },  'json');
                    }
                }
            );
        }

        // 格式化电影名
        function formatMovieName(val, row) {
            return row.movieName;
        }

        // 格式化网站名
        function formatWebsiteName(val, row) {
            return row.websiteName + '&nbsp;(' + row.websiteUrl + ')';
        }

        // 格式化时间
        function formatTime(val, row) {
            var time = row.publishDate;
            return time.substr(0, 10) + ' ' + time.substr(11, 8);
        }

        var url;

        // 打开添加电影动态的对话框
        function openAddMovieDetailDialog() {
            // 打开对话框
            $('#dlg').dialog('open').dialog('setTitle', '添加网站动态信息');
            url = '/admin/movieDetail/save';
        }

        // 保存电影动态
        function saveMovieDetail() {
            $('#fm').form('submit', {
                url: url,
                onSubmit: function () {
                    // 进行表单字段验证，通过后提交表单
                    return $(this).form('validate');
                },
                success: function (result) {
                    var res = eval('(' + result + ')');

                    if (res.success) {
                        $.messager.alert('系统提示', '保存成功！');
                        // 重置新增电影动态对话的输入框的值
                        resetValue();
                        // 关闭对话框
                        $('#dlg').dialog('close');
                        // 刷新数据表格
                        $('#dg').datagrid('reload');
                    } else {
                        $.messager.alert('系统提示', '保存失败！');
                    }
                }
            });
        }

        // 关闭添加电影详情对话框
        function closeMovieDetailDialog() {
            $('#dlg').dialog('close');
            // 重置新增电影动态对话框的输入框的值
            resetValue();
        }

        // 重置新增电影动态对话的输入框的值
        function resetValue() {
            // 设置下拉的值为空
            $('#movie').combobox('setValue', '');
            $('#website').combobox('setValue', '');
            // 设置输入框的值为空
            $('#info').val('');
            $('#url').val('');
        }

        $(document).ready(function () {
            // 电影自动搜索（填充下拉框的数据）
            $('#movie').combobox({
                mode: 'remote', // 从服务器获取数据
                url: '/admin/movie/comboList',
                valueField: 'id', // 绑定到value属性上的数据名称
                textField: 'name', // 绑定到text属性上的数据名称
                delay: 100
            });

            // 网站自动搜索（自动填充下拉框的数据）
            $('#website').combobox({
                mode: 'remote', // 从服务器获取数据
                url: '/admin/website/comboList',
                valueField: 'id', // 绑定到value属性上的数据名称
                textField: 'url', // 绑定到text属性上的数据名称
                delay: 100
            });
        });
    </script>
</head>

<body style="margin: 1px">

<table id="dg" title="电影动态信息管理" class="easyui-datagrid"
       fitColumns="true" pagination="true" rownumbers="true"
        url="/admin/movieDetail/list" fit="true" toolbar="#tb">
    <thead>
        <tr>
            <th field="cb" checkbox="true" align="center"></th>
            <th field="id" width="30" align="center">编号</th>
            <th field="movieName" width="100" align="center" formatter="formatMovieName">电影名称</th>
            <th field="websiteName" width="200" align="center" formatter="formatWebsiteName">网站名称</th>
            <th field="info" width="300" align="center">动态信息</th>
            <th field="url" width="200" align="center">具体地址</th>
            <th field="publishDate" width="90" align="center" formatter="formatTime">发布日期</th>
        </tr>
    </thead>
</table>

<div id="tb">
    <div>
        <a href="javascript:openAddMovieDetailDialog()" class="easyui-linkbutton" iconCls="icon-edit">添加</a>
        <a href="javascript:deleteMovieDetail()" class="easyui-linkbutton" iconCls="icon-remove">删除</a>
        &nbsp;&nbsp;电影动态信息：&nbsp;
        <input type="text" id="s_movieDetail" size="20" onkeydown="if (event.keyCode === 13) searchMovieDetail()"/>&nbsp;&nbsp;
        <a href="javascript:searchMovieDetail()" class="easyui-linkbutton" iconCls="icon-search">搜索</a>
    </div>
</div>

<div id="dlg" class="easyui-dialog" style="width: 500px; height: 230px; padding: 10px 20px"
     closed="true" buttons="#dlg-buttons">

    <form id="fm" method="post">
        <table cellspacing="8px">
            <tr>
                <td>电影名称：</td>
                <td>
                    <input type="text" id="movie" name="movieId" size="24" maxlength="50"
                           class="easyui-combobox" data-options="required:true,panelHeight:'auto'"/>
                </td>
            </tr>
            <tr>
                <td>网站地址：</td>
                <td>
                    <input type="text" id="website" name="websiteId" size="24" maxlength="50"
                           class="easyui-combobox" data-options="required:true,panelHeight:'auto'"/>
                </td>
            </tr>
            <tr>
                <td>动态信息：</td>
                <td>
                    <input type="text" id="info" name="info" size="24" maxlength="50"
                           class="easyui-validatebox" required="required" style="width: 250px"/>
                </td>
            </tr>
            <tr>
                <td>详细网址：</td>
                <td>
                    <input type="text" id="url" name="url" size="24" maxlength="50"
                           class="easyui-validatebox" validType="url" required="required" style="width: 300px"/>
                </td>
            </tr>
        </table>
    </form>

</div>

<div id="dlg-buttons">
    <a href="javascript:saveMovieDetail()" class="easyui-linkbutton" iconCls="icon-ok">保存</a>
    <a href="javascript:closeMovieDetailDialog()" class="easyui-linkbutton" iconCls="icon-cancel">关闭</a>
</div>

</body>

</html>